<template>
  <el-dialog title="添加人脸照片" width="580px" :visible.sync="dialogFormVisible">
    <el-form style="display: flex; justify-content: center;">
      <span style="margin-top: 10px; margin-right: 8px;">上传照片：</span>
      <div class="editor-after">
        <div class="img-width">
          <div style="position: relative; display: flex;" v-for="(item, index) in srcList" :key="index">
            <el-image class="plan-image" :src="item" fit="cover" :preview-src-list="srcList"></el-image>
            <i class="el-icon-remove remove-icon" @click="delPicList(index)"></i>
          </div>
          <el-upload
            action="#"
            accept="image/png, image/jpeg, image/jpg"
            :show-file-list="false"
            :on-change="onUploadChange"
            :auto-upload="false">
            <div class="upload" v-show="srcList.length < 1">
              <i class="el-icon-plus"></i>
            </div>
          </el-upload>
        </div>
        <span class="hint">提示：图片格式为 .jpg/.jpeg/.png，大小不超过 1M。</span>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submitFormInfo">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "UploadFileModel",
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      srcList: [],
    }
  },
  props: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {
    showDialog(id) {
      this.dialogFormVisible = true;
      this.srcList = [];
    },

    delPicList(index) {
      this.srcList.splice(index, 1);
    },

    onUploadChange(file) {
      var _this = this;
      const isIMAGE = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/jpg');
      const isLt1M = file.size / 1024 / 1024 < 2;
      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!');
        return false;
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 2 MB!');
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        if (_this.srcList.length <= 8) {
          _this.srcList.push(src)
        }
      }
    },

    submitFormInfo() {

    }
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/upload-file";
</style>
